<template>
    <view>
        <view class="avatar">
            <view>
                <image :src="iconValueEncode" lazy-load :style="'color:#FFF;border-radius:100%; background:' + colorValue" class="icon-xxl"></image>
            </view>
        </view>
        <scroll-view :scroll-y="true" style="position: fixed; bottom: 0; left: 0; height: 60vh">
            <view class="icon-list">
                <view class="icon-list-title">图标</view>
                <template v-for="(item, index) in iconList">
                    <view :key="item.id" :class="'icon-list-item ' + (item.id === iconId ? 'selected' : '')" @tap="onBindtapIcon(item)">
                        <image :src="item.value" lazy-load class="icon-lg"></image>
                    </view>
                </template>
            </view>

            <view class="icon-list">
                <view class="icon-list-title">颜色</view>
                <template v-for="(item, index) in colorList">
                    <view :key="item.id" :class="'icon-list-item ' + (item.id === colorId ? 'selected' : '')" @tap="onBindtapColor(item)">
                        <view class="color-panel" :style="'background:' + item.value + ';'"></view>
                    </view>
                </template>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            iconList: [],
            colorList: [],
            iconId: '',
            iconValue: '',
            iconValueEncode: '',
            // 以get方式连接的图标地址，参数为rgb&url
            colorId: '',
            colorValue: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        console.log('=== scene:scene-create-seticon:onLoad:', options);
        let sceneCache = uni.getStorageSync('scene'); // getApp().globalData.scene
        // 获取缓存中的取

		this.iconId = sceneCache.iconId
		this.iconValue = sceneCache.iconValue
		this.colorId = sceneCache.colorId
		this.colorValue = sceneCache.colorValue
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        console.log('=== scene:scene-create-seticon:onReady:');
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        console.log('=== scene:scene-create-seticon:onShow:'); // let sceneCache = wx.getStorageSync('scene') // getApp().globalData.scene
        // 获取接口数据

        this.getIconList(() => {
            // 存在缓存
            if (this.iconId && this.colorId) {
                for (let i = 0; i < this.iconList.length; i++) {
                    const currentIcon = this.iconList[i];

                    if (currentIcon.id === this.iconId) {
                        // this.iconId = currentIcon.id
                        // this.iconValue = currentIcon.value
                        // this.iconValueEncode = `${getApp().globalData.iconUrl}?rgb=${encodeURIComponent('#FFFFFF')}&url=${currentIcon.value}`
                        // wx.setStorageSync('scene', sceneCache)
                        getApp().syncScene(this, {
                            iconId: currentIcon.id,
                            iconValue: currentIcon.value,
                            iconValueEncode: `${getApp().globalData.iconUrl}?rgb=${encodeURIComponent('#FFFFFF')}&url=${currentIcon.value}`
                        });
                    }
                }

                for (let i = 0; i < this.colorList.length; i++) {
                    const currentColor = this.colorList[i];

                    if (currentColor.id === this.colorId) {
                        // this.colorId = currentColor.id
                        // this.colorValue = currentColor.value
                        // wx.setStorageSync('scene', sceneCache)
                        getApp().syncScene(this, {
                            colorId: currentColor.id,
                            colorValue: currentColor.value
                        });
                    }
                }
            } // 不存在缓存
            else {
                //     this.iconId = this.iconList[0].id
                //     this.iconValue = this.iconList[0].value
                //     this.iconValueEncode = `${getApp().globalData.iconUrl}?rgb=${encodeURIComponent('#FFFFFF')}&url=${this.iconList[0].value}`
                //     this.colorId = this.colorList[0].id
                //     this.colorValue = this.colorList[0].value
                // wx.setStorageSync('scene', sceneCache)
                getApp().syncScene(this, {
                    iconId: this.iconList[0].id,
                    iconValue: this.iconList[0].value,
                    iconValueEncode: `${getApp().globalData.iconUrl}?rgb=${encodeURIComponent('#FFFFFF')}&url=${this.iconList[0].value}`,
                    colorId: this.colorList[0].id,
                    colorValue: this.colorList[0].value
                });
            }
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
        console.log('--- scene:scene-create-seticon:onHide:');
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        console.log('--- scene:scene-create-seticon:onUnload:');
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 查询场景图标和颜色列表
        getIconList(callback) {
            getApp().globalData.api.getIconList((result) => {
                let iconList = result.icon;
                let colorList = result.color;
                this.iconList = iconList
                this.colorList = colorList
                callback();
            });
        },

        // 选择图标
        onBindtapIcon(ev) {
            let icon = ev 
			// let sceneCache = wx.getStorageSync('scene') // getApp().globalData.scene
            //     this.iconId = icon.id
            //     this.iconValue = icon.value
            //     this.iconValueEncode = `${getApp().globalData.iconUrl}?rgb=${encodeURIComponent('#FFFFFF')}&url=${icon.value}` // 白色图标
            // wx.setStorageSync('scene', sceneCache)

            getApp().syncScene(this, {
                iconId: icon.id,
                iconValue: icon.value,
                iconValueEncode: `${getApp().globalData.iconUrl}?rgb=${encodeURIComponent('#FFFFFF')}&url=${icon.value}` // 白色图标
            });
        },

        // 选择颜色
        onBindtapColor(ev) {
            let color = ev; 
			// let sceneCache = wx.getStorageSync('scene') // getApp().globalData.scene
            //     this.colorId = color.id
            //     this.colorValue = color.value
            // wx.setStorageSync('scene', sceneCache)

            getApp().syncScene(this, {
                colorId: color.id,
                colorValue: color.value
            });
        }
    }
};
</script>
<style>
.avatar {
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.icon-list {
    padding: 20rpx;
    overflow: hidden;
}
.icon-list-title {
    font-size: 24rpx;
    color: #999999;
    margin-left: 18rpx;
}
.icon-list-item {
    width: 64rpx;
    height: 64rpx;
    float: left;
    display: inline;
    margin: 20rpx 18rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-list-item.selected {
    width: 64rpx;
    height: 64rpx;
    background: #dddce1;
    border-radius: 100%;
}
.color-panel {
    width: 42rpx;
    height: 42rpx;
    border-radius: 100%;
}
</style>
